<template>
<section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
            <el-form-item>
                <el-input v-model="filters.userName" placeholder="病人姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="filters.doctorName" placeholder="医生姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker type="date" placeholder="选择日期" v-model="filters.registeredDate" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="queryRegisteredByPage">查询</el-button>
            </el-form-item>
            <div id="divform"></div>
        </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="dataList" highlight-current-row v-loading="listLoading" style="width: 100%;">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" sortable></el-table-column>
        <el-table-column prop="userName" label="病人姓名" sortable></el-table-column>
        <el-table-column prop="registeredDate" label="挂号时间" sortable></el-table-column>
        <el-table-column prop="registeredFee" label="挂号费" sortable></el-table-column>
        <el-table-column prop="registeredStatus" label="挂号状态" :formatter="formatterStatus" sortable></el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button type="primary" size="small" v-if="scope.row.registeredStatus != '1'" @click="handleEdit(scope.$index, scope.row)">线上付款</el-button>
                <el-button type="success" size="small" v-if="scope.row.registeredStatus != '1'" @click="handleEdit1(scope.$index, scope.row)">线下付款</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size" :total="total" style="float:right;"></el-pagination>
    </el-col>
</section>
</template>

<script>
import {
    mapGetters
} from "vuex";
import * as api from "@/api/api.js";
import {
    parse
} from "path";
import axios from "axios";
const Qs = require('qs');

export default {
    data() {
        return {
            defaultProps: {
                children: "children",
                label: "nodeName"
            },
            filters: {
                userName: "",
                department: "",
                registeredDate: null
            },
            showUrl: api.showUrl,
            uploadFileUrl: api.uploadFileUrl,
            dataList: [],
            total: 0,
            current: 1,
            size: 10,
            listLoading: false,
            sels: [], //列表选中列
            editFormVisible: false, //编辑界面是否显示
            editLoading: false,
            editFormRules: {},
            //编辑界面数据
            editForm: {
                haveAccount: '0'
            },
            nucleicAcidStatus: "无记录"
        };
    },
    computed: {
        ...mapGetters("user", ["getUser"])
    },
    methods: {
        formatterStatus: function (row, column) {
            return row.registeredStatus == "1" ? "已付款" : "未付款";
        },
        handleCurrentChange(val) {
            this.current = val;
            this.queryRegisteredByPage();
        },
        //获取列表
        queryRegisteredByPage() {
            let para = {
                current: this.current,
                size: this.size,
                userName: this.filters.userName,
                doctorName: this.filters.doctorName,
                registeredDate: this.filters.registeredDate,
            };
            this.listLoading = true;
            api.queryRegisteredByPage(para)
                .then(res => {
                    this.total = res.returnPage.total;
                    this.dataList = res.returnPage.records;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        handleEdit: function (index, row) {
            axios.post(
                    api.url + "/alipay/payment",
                    Qs.stringify({ //qs是npm仓库管理的包，Qs.stringify是进行序列化
                        orderId: row.registeredId,
                        subject: row.userName + "的挂号费",
                        body: "挂号费用,医生姓名:" + row.doctorName,
                        money: row.registeredFee,
                    }), {
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded", //通过POST方式以页面表单方式提交数据到接口
                        },
                    }
                )
                .then((res) => {
                    let divForm = document.getElementById("divform");
                    if (divForm.length) {
                        document.body.removeChild(divForm[0]);
                    }
                    const div = document.createElement("divform");
                    div.innerHTML = res.data;
                    document.body.appendChild(div);
                    document.getElementsByName("punchout_form")[0].submit();
                })
                .catch((error, status) => {
                    console.log(error);
                });
        },
        handleEdit1: function (index, row) {
            let para = Object.assign({}, row);
            api.registeredPay(para)
                .then(res => {
                    if (res.message == 'success') {
                        this.$message({
                            message: "提交成功",
                            type: "success"
                        });
                        this.queryRegisteredByPage();
                    }
                })
                .catch(() => {
                    this.listLoading = false;
                });
        }
    },
    mounted() {
        this.queryRegisteredByPage();
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.file {
    position: relative;
    display: inline-block;
    background: #63E0EC;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    text-indent: 0;
    line-height: 30px;
    height: 30px;
}

.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>
